<template>
<div class='pie-content'>
  <div class="chart" ref="chart"></div>
  <ul class="explain">
    <li v-for="(item,index) in data" :key="index">
      <div class="name">
        <i class="round" :style="{'background-color': chartColor[item.name]}"></i>
        {{item.keyName}}
      </div>
      <div class="value">{{item.percent}}%</div>
    </li>
  </ul>
</div>
</template>

<script>
import echarts from 'echarts'
import { secondToString } from 'src/assets/js/util'

export default {
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          process: 0, // 加工
          stop: 0, // 停机
          breaks: 0, // 断开
          offLine: 0, // 离线
          alert: 0, // 报警
          changeLine: 0, // 换线
          fault: 0, // 故障
          repair: 0 // 维修
        }
      }
    },
    total: {
      type: Number || String,
      default: 0
    },
    type: {
      type: String,
      default: 'percent' // percent or time
    }
  },
  data () {
    return {
      chart: null,
      chartColor: {
        process: '#18D77F', // 加工
        stop: '#FF8559', // 停机
        breaks: '#999999', // 断开
        offLine: '#666666', // 离线
        alert: '#E43434', // 报警
        changeLine: '#AC70F2', // 换线
        fault: '#F7B82D', // 故障
        repair: '#44D8C6' // 维修
      },
      data: [],
      explain: {
        process: '加工',
        stop: '停机',
        breaks: '断开',
        offLine: '离线',
        alert: '报警',
        changeLine: '换线',
        fault: '故障',
        repair: '维修'
      }
    }
  },
  watch: {
    info () {
      this.changeInfo()
    }
  },
  mounted () {
    this.changeInfo()
    window.addEventListener('resize', () => {
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      } else {
        this.chart.resize()
      }
    })
  },
  methods: {
    changeInfo () {
      let data = []
      for (let key in this.info) {
        data.push({
          value: this.info[key],
          keyName: this.explain[key],
          name: key,
          time: secondToString(this.info[key])
        })
      }
      let total = data.reduce((total, item) => {
        return total + Number(item.value)
      }, 0)
      data = data.map(item => {
        return {
          ...item,
          percent: item.value ? (item.value / total * 100).toFixed(2) : 0
        }
      })
      this.data = data
      this.setOption(data, total)
    },
    setOption (data, total) {
      let self = this
      const option = {
        title: {
          text: this.type === 'percent' ? total + '台' : secondToString(total),
          subtext: '共计',
          x: 'center',
          y: 85,
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
            color: ['#333']
          },
          subtextStyle: {
            color: '#666',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (res) => {
            if (this.type === 'percent') {
              return res.data.value + '台'
            } else if (this.type === 'time') {
              return res.data.time
            }
          }
        },
        grid: {
          bottom: 0,
          left: 0,
          right: 0,
          top: 0
        },
        legend: {
          show: false
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        series: [
          // 主要展示层的
          {
            radius: ['45%', '90%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return self.chartColor[params.name]
                }
              }
            },
            data: data
          },
          // 边框的设置
          {
            radius: ['86%', '90%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: 'rgba(250,250,250,0.5)'
              }
            },
            data: [{
              value: 1
            }]
          }
        ]
      }
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang='stylus' scoped>
  .pie-content{
    display flex
    align-items center
    .chart{
      flex 1
      height 220px
    }
    .explain{
      margin-left 10px
      width 140px
      li{
        display inline-block
        width 50%
        &:nth-child(odd){
          /*margin-right 3px*/
        }
        .round{
          margin-right 5px
          display inline-block
          width 10px
          height 10px
          border-radius 5px
        }
        .name{
          margin 19px 0 9px
        }
      }
    }
  }
</style>
